<template>
    <el-dialog
        v-model="centerDialogVisible"
        title="添加菜单"
        width="30%"
        align-center
        :show-close="false"
        :close-on-click-modal="false"
    >
        <div class="formContainer">
            <el-form :model="menuForm" :rules="menuRules" ref="ruleFormRef">
                <el-form-item label="菜单名称-英文" label-width="20%" prop="name">
                    <el-input v-model="menuForm.name" placeholder="菜单名称-英文" clearable />
                </el-form-item>
                <el-form-item label="菜单名称-中文" label-width="20%" prop="cnName">
                    <el-input v-model="menuForm.cnName" placeholder="菜单名称-中文" clearable />
                </el-form-item>
                <el-form-item label="菜单图标" label-width="20%" prop="iconType">
                    <el-select v-model="menuForm.iconType" clearable placeholder="选择菜单图标" filterable style="width: 100%">
                        <el-option v-for="item in icons.dataList" :key="item.id" :value="item.componentName" :label="item.componentCnName"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="路由Path" label-width="20%" prop="routePath">
                    <el-input v-model="menuForm.routePath" placeholder="路由Path" clearable />
                </el-form-item>
                <el-form-item label="菜单类型" label-width="20%" prop="menuType">
                    <el-radio-group v-model="menuForm.menuType" class="ml-4">
                        <el-radio label="COMMON">静态组件</el-radio>
                        <el-radio label="DYNAMIC">动态路由</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="菜单组件路径" label-width="20%" prop="componentPath" v-if="menuForm.menuType === 'COMMON'">
                    <el-input v-model="menuForm.componentPath" placeholder="菜单组件路径" clearable />
                </el-form-item>
                <el-form-item label="菜单组件" label-width="20%" prop="componentId" v-if="menuForm.menuType === 'DYNAMIC'">
                    <el-select v-model="menuForm.componentId" clearable placeholder="菜单组件" style="width: 100%">
                        <el-option :value="item.id" :label="item.componentCnName" v-for="item in componentList.dataList"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单状态" label-width="20%">
                    <el-select v-model="menuForm.status" clearable placeholder="选择菜单状态" style="width: 100%">
                        <el-option value="NORMAL" label="正常"></el-option>
                        <el-option value="DISABLE" label="禁用"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="挂载文根" label-width="20%" prop="routeRootId">
                    <el-select v-model="menuForm.routeRootId" clearable placeholder="挂载文根" style="width: 100%">
                        <el-option :value="item.id" :label="item.routeRootName" v-for="item in routeRootPath.dataList"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="父菜单" label-width="20%" prop="parentId">
                    <el-select v-model="menuForm.parentId" clearable placeholder="选择父菜单" filterable style="width: 100%" >
                        <el-option v-for="item in parentMenus" :key="item.id" :value="item.id" :label="item.cnName"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="扩展数据" label-width="20%" prop="meta">
                    <el-input v-model="menuForm.meta" clearable type="textarea" placeholder="扩展数据" style="width: 100%"/>
                </el-form-item>
                <el-form-item label="排序优先级" label-width="20%" prop="orderNum">
                    <el-input-number v-model="menuForm.orderNum" min="0" />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelDialog()">取 消</el-button>
                <el-button type="primary" :loading="commitLoading" @click="submitDialog(ruleFormRef)">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts" name="AddMenuDialog">
import {addMenuInfo, menuInfoQuery, updateMenuInfo} from '@/request/menu'
import {ElNotification, FormInstance} from "element-plus";
import {componentInfoQueryNoContent} from "@/request/components";
import {routeRootPathInfoQuery} from "@/request/routeRootPath";
import {computed, defineProps, ref} from "vue";
import {useMenuStore} from "@/stores/menu/menu";

const props = defineProps(['menuForm']);

let menuForm = computed(() => {return props['menuForm']})

let componentList = ref([]);
let routeRootPath = ref([]);
let commitLoading = ref(false);
let menuRules = ref({
    name: [{ required: true, message: '英文名称不能为空', trigger: 'blur' }],
    cnName: [{ required: true, message: '中文名称不能为空', trigger: 'blur' }],
    iconType: [{ required: true, message: '图标不能为空', trigger: 'blur' }],
    routePath: [{ required: true, message: '路由Path不能为空', trigger: 'blur' }],
    routeRootId: [{ required: true, message: '路由文根不能为空', trigger: 'blur' }],
    parentId: [{ required: true, message: '父菜单不能为空', trigger: 'blur' }],
    meta: [{ required: true, message: '父菜单不能为空', trigger: 'blur' }]
});

// 查询
let param = {
    componentType: "CUSTOM",
    pageInfo: {
        pageIndex: 1,
        pageSize: 10000
    }
}
componentInfoQueryNoContent(param).then(res => {
    componentList.value = res.data
})
let routeRootParam = {
    pageInfo: {
        pageIndex: 1,
        pageSize: 10000
    }
}
routeRootPathInfoQuery(routeRootParam).then(res => {
    routeRootPath.value = res.data
})

let centerDialogVisible = computed(() => {
    return useMenuStore().addOrUpdateDialog;
})
let parentMenus = computed(() => {
    return useMenuStore().parentMenuList;
})
let icons = computed(() => {
    return useMenuStore().menuIcons;
})

function cancelDialog() {
    useMenuStore().resetAddOrUpdateDialog(false);
}

let ruleFormRef = ref<FormInstance>();

function submitDialog (formEl: FormInstance | undefined) {
    if (!formEl) return
    commitLoading.value = true;
    formEl.validate((valid, fields) => {
        if (valid) {
            commitLoading.value = true;
            let paramDataInfo = {
                status: '',
                name: '',
                cnName: ''
            }
            if (menuForm.value.id !== '') {
                // 修改
                updateMenuInfo(menuForm.value).then(res => {
                    if (res["code"] === '200') {
                        ElNotification({
                            title: 'Success',
                            message: res["message"],
                            type: 'success'
                        })
                        useMenuStore().resetAddOrUpdateDialog(false);
                        menuInfoQuery(paramDataInfo).then(res => {
                            useMenuStore().setMenuDataList(res.data);
                        })
                    } else {
                        ElNotification({
                            title: 'Error',
                            message: res["errorCode"] + ": " + res["message"],
                            type: 'error'
                        })
                    }
                    commitLoading.value = false
                }).catch(res => {
                    commitLoading.value = false
                })
            } else {
                // 调用后端接口插入数据
                addMenuInfo(menuForm.value).then(res => {
                    if (res["code"] === '200') {
                        ElNotification({
                            title: 'Success',
                            message: res["message"],
                            type: 'success'
                        })
                        useMenuStore().resetAddOrUpdateDialog(false);
                        menuInfoQuery(paramDataInfo).then(res => {
                            useMenuStore().setMenuDataList(res.data);
                        })
                    } else {
                        ElNotification({
                            title: 'Error',
                            message: res["errorCode"] + ": " + res["message"],
                            type: 'error'
                        })
                    }
                    commitLoading.value = false
                }).catch(res => {
                    commitLoading.value = false
                })
            }
        }
    })
}
</script>

<style scoped lang="less">
.formContainer {
    .selectIconsClass {
        width: 20px;
    }
}
</style>